import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { fetchBallsSlice } from './balls.actions';
import { IBall, IInitialState } from './balls.types';

const initialState: IInitialState = {
	balls: []
};

export const ballsSlice = createSlice({
	name: 'balls',
	initialState,
	reducers: {},
	extraReducers: (builder) => {
		builder.addCase(fetchBallsSlice.pending, (state) => {
			state.loading = true;
			state.errors = null;
		});
		builder.addCase(
			fetchBallsSlice.fulfilled,
			(state, action: PayloadAction<IBall[]>) => {
				state.balls = action.payload.map((item) => ({
					...item,
					favorite: false
				}));
				state.loading = false;
			}
		);
		builder.addCase(fetchBallsSlice.rejected, (state, action) => {
			// state.loading = true;
			state.errors = action.error.message;
		});
	}
});

export default ballsSlice.reducer;
// export const userActions = userSlice.actions;
